<template>
  <load v-if="this.$store.state.isLoad"></load>
  <div class="read" v-else-if="!this.$store.state.isLoad" ref="box">
    <div class="top" v-if="isShow">
      <van-nav-bar left-arrow @click-left="getIsshow" fixed>
        <template #left>
          <span>
            <van-icon class="icon" name="arrow-left" @click="goback" />
          </span>
          <span class="title">{{ listData.title }}</span>
          <span class="chapter"> {{ short_title }} </span>
          <span class="detail" @click="goDetail"> 详情 </span>
        </template>
      </van-nav-bar>
    </div>
    <!-- <div class="up" @click="getUp">点击此处进入上一话...</div> -->
    <van-pull-refresh
      v-model="refreshing"
      pulling-text="下拉进入上一章"
      loosing-text="释放进入上一章"
      :disabled="isT"
      @refresh="onRefresh"
    >
      <div
        class="imgBox"
        v-for="(item, index) in imgData"
        :key="index"
        @click="getIsshow"
      >
        <img :src="item" />
      </div>
      <div class="down" @click="getNext" v-if="isDown">
        点击此处进入下一话...
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast } from "vant";
import load from "../components/Load.vue";
export default {
  name: "ReadComics",
  components: {
    load,
  },
  data() {
    return {
      imgData: [],
      isShow: false,
      listData: [],
      short_title: this.$route.query.short_title,
      bookId: this.$route.query.bookId,
      refreshing: false,
      isT: false,
      isDown: false,
    };
  },
  created() {
    //请求漫画索引
    this.axios({
      method: "get",
      url: "GetImageIndex",
      params: {
        ep_id: this.$route.query.id,
      },
    })
      .then((res) => {
        let imageIndex = res.data.data.images;
        // console.log("imageIndex==>", imageIndex);
        this.getRequest(imageIndex);
      })
      .catch((err) => {
        console.log("err==>", err);
      });
    //请求漫画详情
    this.axios({
      method: "get",
      url: "/ComicDetail",
      params: {
        comic_id: this.$route.query.bookId,
      },
    }).then((res) => {
      if (res) {
        this.listData = res.data.data;
        this.chapter = this.listData.ep_list;
        // console.log(this.chapter);
        this.chapter.reverse();
      }
    });

    if (this.$route.query.index == this.$route.query.length) {
      this.isDown = false;
    }
    // else {
    //   this.isDown = true;
    // }
    if (this.$route.query.index == 0) {
      this.isT = true;
    } else {
      this.isT = false;
    }
    this.setData();
  },
  methods: {
    //下拉加载
    onRefresh() {
      setTimeout(() => {
        this.refreshing = false;
        this.getUp();
        Toast("即将进入上一章...");
      }, 1000);
    },
    read(id, bookId, short_title, vip, index) {
      if (vip) {
        this.$router.push({
          name: "Vip",
        });
      } else {
        this.$router.push({
          name: "Read",
          query: {
            bookId: bookId,
            short_title: short_title,
            id: id,
            index: index,
            length: this.listData.ep_list.length,
          },
        });
      }
    },
    getIsshow() {
      this.isShow = !this.isShow;
    },
    goback() {
      this.$router.back();
    },
    goDetail() {
      this.$router.push({
        name: "Detail",
        query: {
          id: this.$route.query.bookId,
        },
      });
    },
    //获取下一章数据
    getNext() {
      let num = Number(this.$route.query.index);
      Toast("即将进入下一章...");
      setTimeout(() => {
        this.read(
          this.chapter[num + 1].id,
          this.bookId,
          this.chapter[num + 1].short_title,
          this.chapter[num + 1].is_locked,
          num + 1
        );
      }, 3000);
    },
    //获取上一章数据
    getUp() {
      let num = Number(this.$route.query.index);
      setTimeout(() => {
        this.read(
          this.chapter[num - 1].id,
          this.bookId,
          this.chapter[num - 1].short_title,
          this.chapter[num - 1].is_locked,
          num - 1
        );
      }, 3000);
    },
    getRequest(imageIndex) {
      let Chapter = [];
      for (let i = 0; i < imageIndex.length; i++) {
        let text = `${imageIndex[i].path}@660w.jpg`;
        Chapter.push(text);
      }
      let arr = JSON.stringify(Chapter);
      this.axios({
        method: "get",
        url: "ImageToken",
        params: {
          urls: arr,
        },
      })
        .then((res1) => {
          let arr = [];
          for (let i = 0; i < res1.data.data.length; i++) {
            let img =
              res1.data.data[i].url + "?token=" + res1.data.data[i].token;
            arr.push(img);
          }
          this.imgData = arr;
          if (this.imgData) {
            if (this.imgData.length > 0) {
              this.isDown = true;
            } else {
              this.isDown = false;
            }
          }
        })
        .catch((err1) => {
          console.log("err1==>", err1);
        });
    },
    //把数据传进本地存储
    setData() {
      let userData = localStorage.getItem("user");
      if (userData) {
        userData = JSON.parse(userData);
      } else {
        userData = [];
      }
      let user = sessionStorage.getItem("user");
      if (user) {
        user = JSON.parse(user);
      } else {
        user = [];
      }
      for (let i = 0; i < userData.length; i++) {
        if (userData[i].phone === user.phone) {
          if (userData[i].book) {
            let index = userData[i].book.findIndex(
              (item) => item.bookId == this.$route.query.bookId
            );
            // console.log(index);
            userData[i].book[index].short_title = this.$route.query.short_title;
            userData[i].book[index].comicId = this.$route.query.id;
            userData[i].book[index].index = this.$route.query.index;
            userData[i].book[index].vip = this.$route.query.vip;
            userData[i].book[index].bLength = this.$route.query.length;
            // userData[i].book[index].is_locked = this.$route.query.is_locked
          }
        }
      }
      localStorage.setItem("user", JSON.stringify(userData));
    },
  },
  watch: {
    $route() {
      //请求漫画索引
      this.$route.query.id;
      this.setData();
      if (this.imgData.length > 0) {
        this.isDown = false;
      } else {
        this.isDown = true;
      }
      if (this.$route.query.index == this.$route.query.length) {
        this.isDown = false;
      } else {
        this.isDown = true;
      }
      if (this.$route.query.index == 0) {
        this.isT = true;
      } else {
        this.isT = false;
      }
      this.isUP = false;
      this.axios({
        method: "get",
        url: "GetImageIndex",
        params: {
          ep_id: this.$route.query.id,
        },
      })
        .then((res) => {
          let imageIndex = res.data.data.images;
          // console.log("imageIndex==>", imageIndex);
          this.getRequest(imageIndex);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
      this.short_title = this.$route.query.short_title;
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  ::v-deep .van-nav-bar__content {
    background-color: #1e212c;
    box-sizing: border-box;
  }
  .van-hairline--bottom:after {
    border-bottom-width: 0;
  }
  .icon {
    font-size: 20px;
    color: #ffffff;
  }
  .title {
    color: #ffffff;
    font-size: 16px;
    margin-left: 10px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chapter {
    margin-left: 10px;
    font-size: 12px;
    color: #ffffff;
    opacity: 0.7;
  }
  .detail {
    width: 52px;
    height: 24px;
    border: 1px solid #fb7299;
    border-radius: 4px;
    margin-left: 20px;
    color: #fb7299;
  }
}
.imgBox {
  width: 100%;
  display: block;
  img {
    width: 100%;
    display: block;
    margin: -1px;
  }
}
.up {
  width: 100%;
  height: 100px;
  text-align: center;
  font-size: 16px;
  line-height: 100px;
  background-color: #fb7299;
  color: #ffffff;
}
.down {
  width: 100%;
  height: 100px;
  text-align: center;
  font-size: 16px;
  line-height: 100px;
  background-color: #ccc;
  color: #ffffff;
}
::v-deep .van-loading {
  background-color: #ccc;
}
</style>